<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>footImg</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100vh;
            height: 100vh;
            background-color: #F6F6F6;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .arrow {
            position: relative;
            margin-left: 49%;
            width: 20px;
            height: 40px;
            display: flex;
            justify-content: center; /* 确保水平居中 */
            align-items: center;     /* 确保垂直居中 */
        }

        /* 箭头的线 */
        .arrow::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 90%;
            /*background: black;*/
            border-left: 1px dashed #E0E0E0; /* 使用虚线边框 */
            transform: translateX(-50%);
        }

        /* 箭头的箭头部分 */
        .arrow::after {
            content: '';
            position: absolute;
            bottom: 0px;
            left: 30%;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 10px solid #E0E0E0;  /* 箭头朝下 */
            transform: translateX(-50%);
        }

        .item-box {
            margin-left: 50px;
            margin-right: 50px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* 添加偏移和更大的模糊效果 */
            padding: 5px;
            position: relative;
        }

        .item-left {
            float: left;
            width: 50%; /* 调整宽度以避免溢出 */
            color: darkgreen;
            font-size: 13px;
        }

        .item-right {
            float: left;
            width: 50%; /* 调整宽度以避免溢出 */
            text-align: right;
            margin-top: 3px;
            font-size: 10px;
        }

        .item-clear {
            clear: both; /* 清除浮动 */
            font-size: 10px;
            margin-top: 30px;
            margin-left: 28px;
            color: gray;
        }
        .index-circle {
            display: inline-block;
            width: 14px;  /* 圆形的宽度 */
            height: 14px; /* 圆形的高度 */
            border-radius: 50%;  /* 使其变为圆形 */
            background-color: skyblue;  /* 圆形背景色，可以根据需要修改 */
            text-align: center;
            margin-right: 3px;  /* 圆形和名字之间的间距 */
            font-size: 10px;  /* 下标字体大小 */
        }
    </style>
</head>
<body >
<div class="container">
    <div style="height: 20px; background-color: #F6F6F6">
    </div>
    <#list items as item>
        <div class="item-box">
            <div class="item-left">
                <span class="index-circle">${item_index + 1}</span>
                ${item.name}
            </div>
            <div class="item-right">
                ${item.productWeight}
            </div>
            <div class="item-clear">
                ${item.productName}
            </div>
        </div>
        <!-- 虚线箭头 -->
        <#if item_has_next> <!-- 判断是否是最后一个item，避免在最后一个后面加箭头 -->
            <div style="text-align: center; margin-top: 5px;" class="arrow">
            </div>
        </#if>
    </#list>

    <div style="height: 20px; background-color: #F6F6F6">
    </div>
</div>
</body>
</html>
